<template>
  <div class="profile-tab">
    <h3>个人中心</h3>
    <!-- 其他个人信息展示 -->
    <button class="friend-req-btn" @click="$emit('switchTab', 'FriendRequestsTab')">好友请求</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'FriendsTab',
  data() {
    return {
      friends: [],
      defaultAvatar: 'https://img.yzcdn.cn/vant/logo.png',
      searchKeyword: '',
      searchResults: [],
      searchMsg: ''
    }
  },
  created() {
    this.loadFriends()
  },
  methods: {
    loadFriends() {
      const userId = localStorage.getItem('userId')
      axios.get('/api/friend/list', { params: { userId } })
        .then(res => {
          this.friends = res.data
        })
        .catch(() => {
          this.friends = []
        })
    },
    goChat(friend) {
      this.$router.push({ path: '/chat', query: { friendId: friend.id } })
    },
    searchUser() {
      if (!this.searchKeyword) {
        this.searchMsg = '请输入关键词'
        this.searchResults = []
        return
      }
      axios.get('/api/user/search', { params: { keyword: this.searchKeyword } })
        .then(res => {
          if (res.data.length === 0) {
            this.searchMsg = '未找到用户'
          } else {
            this.searchMsg = ''
          }
          this.searchResults = res.data
        })
        .catch(() => {
          this.searchMsg = '搜索失败'
          this.searchResults = []
        })
    },
    sendFriendRequest(friendId) {
      const userId = localStorage.getItem('userId')
      axios.post('/api/friend/request', { userId, friendId })
        .then(res => {
          this.searchMsg = res.data.message
        })
        .catch(() => {
          this.searchMsg = '请求失败'
        })
    }
  }
}
</script>

<style scoped>
/* 复制你美化后的样式即可 */
.friend-req-btn {
  margin-top: 18px;
  padding: 8px 24px;
  background: #07c160;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.friend-req-btn:hover {
  background: #13ce66;
}
</style>